<template>
  <div style="width: 100%; height: 100%; display: grid; grid-template-columns: 20% 80%; grid-template-rows: 10% 90%">
    <div style="background-color: blue; grid-row: 1/2; font-size: 40px; display: flex; justify-content: center;align-items: center">
      学习
    </div>
    <div style="background-color: pink; grid-row: 2/3">
      <el-menu mode="vertical">
        <el-menu-item>
          <div @click="toEnglish">英语</div>
        </el-menu-item>
        <div style="border-bottom: 1px solid blue"></div>
        <el-menu-item>
          <div @click="toMath()">数学</div>
        </el-menu-item>
        <div style="border-bottom: 1px solid blue"></div>
        <el-menu-item>
          <div @click="toChinese">语文</div>
        </el-menu-item>
        <div style="border-bottom: 1px solid blue"></div>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "ViewLayout",
  methods: {
    toEnglish() {
      this.$router.push({name: 'ViewCommonword'})
    },
    toMath() {
      this.$router.push({name: 'ViewMath'})
    },
    toChinese() {
      this.$router.push({name: 'ViewChinese'})
    }
  },
}
</script>